<template>
  <view class="settings-container">
    <!-- 当前邮箱 -->
    <view class="setting-item">
      <text class="title">邮箱:{{ userInfo2.email == null ? "暂无绑定邮箱" : userInfo2.email }} </text>
      <button @click="openEmailPopup" class="btn">修改</button>
    </view>

    <!-- 消息提醒状态 -->
    <view class="setting-item">
      <text class="title">消息提醒状态: {{ messageReminderStatus ? '开启' : '关闭' }}</text>
      <switch :checked="messageReminderStatus" @change="toggleMessageReminder" class="switch" />
    </view>
    <!-- 当前主题色 -->
    <!-- <view class="setting-item">
      <text class="title">当前主题色: {{ currentThemeColor }}</text>
      <view class="color-preview" :style="{ backgroundColor: currentThemeColor }"></view>
      <button @click="openThemeColorPopup" class="btn">选择</button>
    </view> -->
    <!-- 修改邮箱弹窗 -->
    <uni-popup ref="emailPopup" type="dialog">
      <view class="popup-content">
        <text class="popup-title">修改邮箱</text>
        <view class="form-item">
          <text class="form-label">新邮箱:</text>
          <input v-model="newEmail" type="text" placeholder="请输入新邮箱" class="form-input" />
        </view>
        <view class="form-item">
          <text class="form-label">验证码:</text>
          <input v-model="verificationCode" type="text" placeholder="请输入验证码" class="form-input" />
          <button class="btn-get-code" @click="getVerificationCode" :disabled="isCodeSent">
            {{ isCodeSent ? `${countdown}秒后重试` : '获取验证码' }}
          </button>
        </view>
        <view class="button-group">
          <button class="btn-confirm" @click="updateEmail">确认</button>
          <button class="btn-cancel" @click="closeEmailPopup">取消</button>
        </view>
      </view>
    </uni-popup>
    <!-- 选择主题色弹窗 -->
    <uni-popup ref="themeColorPopup" type="dialog">
      <view class="popup-content">
        <view class="popup-header">
          <text>请选择主题色:</text>
        </view>
        <view class="color-picker">
          <view v-for="color in themeColors" :key="color" @click="selectThemeColor(color)" class="color-picker-item">
            <view class="inner-color" :style="{ backgroundColor: color }"></view>
            <view class="inner-color-text">{{ color }}</view>
          </view>
        </view>
        <view class="popup-footer">
          <button @click="closeThemeColorPopup" class="btn-cancel">关闭</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import UniPopup from '../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import { emailBinding, getVertifyCode, updatePushStatus, userInfo } from '@/api/login/login';
// 当前用户的配置
interface UserInfo {
  id?: number;
  openid?: string;
  email?: string;
  isPush?: number;
}
const userInfo2 = ref<UserInfo>({
  email: null
});
const userInfoInit = async () => {
  const res = await userInfo();
  userInfo2.value = res.data;
  messageReminderStatus.value = (userInfo2.value.isPush == 1)
}
onMounted(() => {
  userInfoInit();
})

// 邮箱相关
const showEmailModal = ref(false);
const newEmail = ref<string>('');
const emailPopup = ref(null);
const verificationCode = ref<string>(''); // 验证码
const isCodeSent = ref<boolean>(false); // 验证码是否发送过了
const countdown = ref<number>(60); // 倒计时
const openEmailPopup = () => {
  if (emailPopup.value) {
    showEmailModal.value = true;
    emailPopup.value.open("emailPopup");
  }
}
const getVerificationCode = async () => {
  if (isCodeSent.value) return; // 防止重复点击
  isCodeSent.value = true;
  startCountdown();
  const res = await getVertifyCode(newEmail.value)
  // console.log('验证码已发送至邮箱:', res.data);
};
const startCountdown = () => {
  const timer = setInterval(() => {
    if (countdown.value === 0) {
      clearInterval(timer);
      isCodeSent.value = false;
      countdown.value = 60;
    } else {
      countdown.value--;
    }
  }, 1000);
};

interface EmailBandingDto {
  email: string;
  code: string;
}
const updateEmail = async () => {
  if (!newEmail.value || !verificationCode.value) {
    console.log('请填写邮箱和验证码');
    return;
  }
  const emailDto: EmailBandingDto = {
    email: newEmail.value,
    code: verificationCode.value
  }
  const res = await emailBinding(emailDto);
  if (res.code != 200) {
    uni.showToast({
      title: "验证码不正确",
      icon: "none"
    })
    return;
  }
  console.log('新邮箱:', newEmail.value);
  console.log('验证码:', verificationCode.value);
  userInfoInit();
  uni.showToast({
    title: "邮箱设置成功",
    icon: "none"
  })
  setTimeout(() => {
    closeEmailPopup();
  }, 500)
};
const closeEmailPopup = () => {
  (emailPopup.value as any)?.close();
};


// 消息提醒相关
const messageReminderStatus = ref(true);
const toggleMessageReminder = async (event: any) => {
  messageReminderStatus.value = event.detail.value;
  if(messageReminderStatus.value == true){
      // 1
      await updatePushStatus(1);
  }else{
      // 0
      await updatePushStatus(1);
  }
  userInfoInit();
};



// 主题色相关
const currentThemeColor = ref('#fff');
const showThemeColorModal = ref(false);
const themeColors = ref(['#fff', '#000', '#f00', '#0f0', '#00f', '#ff0']);
const themeColorPopup = ref(null);
const openThemeColorPopup = () => {
  console.log("openThemeColorPopup: ", themeColorPopup.value)
  if (themeColorPopup.value) {
    showThemeColorModal.value = true;
    themeColorPopup.value.open("themeColorPopup");
  }
}
const closeThemeColorPopup = () => {
  if (themeColorPopup.value) {
    showThemeColorModal.value = false;
    themeColorPopup.value.close();
  }
}
const selectThemeColor = (color: string) => {
  currentThemeColor.value = color;
  showThemeColorModal.value = false;
  themeColorPopup.value.close();
};

// 个性签名相关
const currentSignature = ref('这是一个个性签名');
const newSignature = ref('');
const showSignatureModal = ref(false);
const signaturePopup = ref(null);
const openSignaturePopup = () => {
  if (signaturePopup.value) {
    showSignatureModal.value = true;
    signaturePopup.value.open("signaturePopup");
  }
}
const closeSignaturePopup = () => {
  if (signaturePopup.value) {
    showSignatureModal.value = false;
    signaturePopup.value.close();
  }
}
const updateSignature = () => {
  if (newSignature.value) {
    currentSignature.value = newSignature.value;
    showSignatureModal.value = false;
    newSignature.value = '';
    signaturePopup.value.close();
  }
};
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.setting-item {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  position: relative;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.switch {
  position: absolute;
  right: 10px;
  /* top: 50%; */
}

.title {
  font-size: smaller;
  text-align: left;
}

.btn {
  position: absolute;
  right: 10px;
  /* top: 50%; */
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  /* width: 80px; */
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  /* float: right; */
}

.btn:active {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.color-picker-item {
  height: 100px;
  width: 100px;
}

.inner-color {
  border-radius: 10px;
  margin: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.inner-color-text {
  text-align: center;
  font-size: smaller;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  display: block;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-color: #6a11cb;
  outline: none;
}

.btn-get-code {
  margin-top: 10px;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-get-code:disabled {
  background-color: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}

.btn-get-code:not(:disabled):hover {
  background-color: #6a11cb;
  color: #fff;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.btn-confirm,
.btn-cancel {
  /* flex: 1; */
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-confirm {
  background-color: #6a11cb;
  color: #fff;
  margin-right: 10px;
}

.btn-confirm:hover {
  background-color: #2575fc;
}

.btn-cancel {
  background-color: #f0f0f0;
  color: #333;
}

.btn-cancel:hover {
  background-color: #e0e0e0;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.color-preview {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  display: inline-block;
}

.popup-content {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.popup-header {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
}

.popup-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

button {
  margin-top: 10px;
}

.popup-content {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.popup-header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.popup-body {
  margin-bottom: 20px;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  /* 允许垂直调整大小 */
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #6a11cb;
  outline: none;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
}
</style>